import React, { useState, useEffect, useCallback } from "react";
import cx from "classnames";
import PropTypes from "prop-types";
import { map, includes } from "lodash";
import Button from "antd/lib/button";
import Dropdown from "antd/lib/dropdown";
import Menu from "antd/lib/menu";
import EllipsisOutlinedIcon from "@ant-design/icons/EllipsisOutlined";
import Modal from "antd/lib/modal";
import Tooltip from "antd/lib/tooltip";
import Link from "@/components/Link";
import Upload from "antd/lib/upload";
import message from 'antd/lib/message';
import FavoritesControl from "@/components/FavoritesControl";
import EditInPlace from "@/components/EditInPlace";
import { DashboardTagsControl } from "@/components/tags-control/TagsControl";
import getTags from "@/services/getTags";
import { clientConfig } from "@/services/auth";
import { policy } from "@/services/policy";
import { durationHumanize } from "@/lib/utils";
import { DashboardStatusEnum } from "../hooks/useDashboard";
import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
import EditDashboardDialog from "@/components/dashboards/EditDashboardDialog";
import PortalMenu from "@/components/ApplicationArea/PortalLayout/PortalMenu";
import ExpandedUrlDialog from "@/components/dashboards/ExpandedUrlDialog";
import Portal from '@/services/portal';
import { Auth } from "@/services/auth";
import logoUrl from "@/assets/images/favicon-32x32.png";
import { MenuFoldOutlined, DownOutlined } from '@ant-design/icons';
import * as Icons from '@ant-design/icons';

import "./DashboardHeader.less";

function getDashboardTags() {
  return getTags("api/dashboards/tags").then(tags => map(tags, t => t.name));
}

function buttonType(value) {
  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_mode');
  return value ? "primary" : (showPortal ? "text" : "button");
}

const MenuShortcut = React.memo(function({item, menuClick, color}) {
  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_mode');
  const portalstyle = showPortal ? localStorage.getItem('colorstyle_mode') : 'portal';
  const handleShowUrlDialog = useCallback((item) => {
    menuClick(0);
    ExpandedUrlDialog.showModal({ width: item.parameter || "80%", height: item.popheight || "480px", title: item.dashboardTitle || item.label, url: item.url})
    .onClose();
  }, [menuClick]);

  if (item.hasOwnProperty("key")) {
    if (Portal.menuHasChildren(item)) {
        return (
          <Dropdown
            overlay={<PortalMenu key={"shortcut_" + item.key} menuItems={item.children} menuClick={menuClick} isShortcut="true" />} 
          >
            <Button type="text" size="large" icon={Icons[item.icon] && React.createElement(Icons[item.icon])}
              style={{"--style-color": color, background: 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/shortcut.png) no-repeat center/100% 100%'}}
            >
              {item.dashboard === "" && item.label}
              {item.dashboard === "URL" && (
                  <a onClick={() => window.open(item.title,"pop_redash", item.parameter)}>{item.label}</a>
              )}
              {item.dashboard === "POP" && (
                  <a onClick={() => handleShowUrlDialog(item)}>{item.label}</a>
              )}
              {item.dashboard !== "" && item.dashboard !== "URL" && item.dashboard !== "POP" && (
                  <a onClick={() => menuClick(item.dashboard, item.dashboardTitle || item.label, item.parameter, item.refreshRate || 0)}>{item.label}</a>
              )}
              <DownOutlined />
            </Button>
          </Dropdown>
        );
    } else if (item.dashboard === "") { 
        return null;
    } else { 
        return (
          <Button type="text" size="large" icon={Icons[item.icon] && React.createElement(Icons[item.icon])}
            style={{"--style-color": color, background: 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/shortcut.png) no-repeat center/100% 100%'}}
          > 
            {item.dashboard === "" && item.label}
            {item.dashboard === "URL" && (
                <a onClick={() => window.open(item.url,"pop_redash", item.parameter)}>{item.label}</a>
            )}
            {item.dashboard === "POP" && (
                <a onClick={() => handleShowUrlDialog(item)}>{item.label}</a>
            )}
            {item.dashboard !== "URL" && item.dashboard !== "POP" && (
                <a onClick={() => menuClick(item.dashboard, item.dashboardTitle || item.label, item.parameter, item.refreshRate || 0)}>{item.label}</a>
            )}
          </Button>
        )
    }
  } else {
    if (Portal.itemHasChildren(item)) {
      return (
        <Dropdown
          overlay={<PortalMenu key={"shortcut_" + item.key} menuItems={item.children} menuClick={menuClick} isShortcut="true" />} 
        >
          <Button type="text" size="large" icon={Icons[item.icon] && React.createElement(Icons[item.icon])}
            style={{"--style-color": color, background: 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/shortcut.png) no-repeat center/100% 100%'}}
          >
            {item.name}
            <DownOutlined />
          </Button>
        </Dropdown>
      );
    } else {            
      return (
        <button type="text" size="large" icon={Icons[item.icon] && React.createElement(Icons[item.icon])}
          style={{"--style-color": color, background: 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/shortcut.png) no-repeat center/100% 100%'}}
        >
          <a onClick={() => menuClick(item.id, item.name)}>{item.name}</a>
        </button>
      );
    }
  }        
});

const DashboardPagePortal = React.memo(function({portalStyle, items, portalLogo, portalBgTitle, color, bgColor, isHiddenTitle, dashboradTitle, clickhandle, handleMenuClick}) {
  if (portalStyle === "drawer") {
    return (
      <div style={{height:"50px",width:"100%",background: bgColor || "#00000000"}}>
        {clickhandle && (
          <button style={{float:"left",margin:"5px 5px 5px 5px"}} onClick={clickhandle}>
            <MenuFoldOutlined />
          </button>
        )}  
        <div style={{margin:"auto auto auto 50px",height:"50px",textAlign:"center", background: portalLogo}}>
          {portalBgTitle && (<label style={{margin:"10px",fontSize:"20px",color}}>{portalBgTitle}</label>)}
          {(items.length > 0) && items.map(item=>(<MenuShortcut item={item} menuClick={handleMenuClick} color={color} />))} 
          {!isHiddenTitle && (<label style={{margin:"10px",fontSize:"20px",color}}>
            {clickhandle && (
              <a onClick={() => window.opener ? window.close(): Auth.logout()} >
                <img src={logoUrl} alt="首页" title="首页" />&nbsp;
              </a>
            )}
            {dashboradTitle}
          </label>
          )}
        </div>
      </div>
    );
  } else if (portalStyle === "windows") {
    return (
      <div style={{height:"50px",width:"100%",background: bgColor || "#00000000"}}>
        <div style={{margin:"0 auto",height:"50px",textAlign:"center", background: portalLogo}}>
          {portalBgTitle && (<label style={{margin:"10px",fontSize:"20px",color}}>{portalBgTitle}</label>)}
          {(items.length > 0) && items.map(item=>(<MenuShortcut item={item} menuClick={handleMenuClick} color={color} />))} 
          {!isHiddenTitle && (<label style={{margin:"10px",fontSize:"20px",color}}>
            {clickhandle && (
              <a onClick={() => window.opener ? window.close(): Auth.logout()} >
                <img src={logoUrl} alt="首页" title="首页" />&nbsp;
              </a>
            )}
            {dashboradTitle}
          </label>
          )}
        </div>
      </div>
    );
  } else {
    return ( 
      <div style={{height:"50px",width:"100%",background: bgColor || "#00000000"}}>
        <div style={{margin:"0 auto",height:"50px",textAlign:"center", background: portalLogo}}>
          {portalBgTitle && (<label style={{margin:"10px",fontSize:"20px",color}}>{portalBgTitle}</label>)}
          {(items.length > 0) && items.map(item=>(<MenuShortcut item={item} menuClick={handleMenuClick} color={color} />))} 
          {!isHiddenTitle && (<label style={{margin:"10px",fontSize:"20px",color}}>
            {clickhandle ? (
              <React.Fragment>
              <a onClick={() => window.opener ? window.close(): Auth.logout()} >
                <img src={logoUrl} alt="首页" title="首页" />
              </a>&nbsp;
              <label onClick={clickhandle}>
                {dashboradTitle}
                <DownOutlined style={{fontSize:"15px"}} />
              </label>
              </React.Fragment>
            ) : (
              <label>{dashboradTitle}</label>
            )}
          </label>
          )}
        </div>
      </div>
    );
  }  
});

function DashboardPageTitle({ dashboardOptions, title, clickhandle, handleMenuClick }) {
  const [isLoading, setIsLoading] = useState(true);
  const [isHiddenTitle, setIsHiddenTitle] = useState(false);
  const [bgColor, setBgColor] = useState("");
  const [portalBgTitle, setPortalBgTitle] = useState("");
  const [portalLogo, setPortalLogo] = useState('url("/static/images/third/logo.png") no-repeat left top');
  const [items, setItems] = useState([]);
  const [color, setColor] = useState(localStorage.getItem('colorstyle_color') || "#333333ee");
  const { dashboard, canEditDashboard, updateDashboard, editingLayout } = dashboardOptions;
  const showPortal = window.location.search.includes("show_portal");
  const portalStyle = localStorage.getItem('portal_style');
  const portalmenu = localStorage.getItem('portal_menu') || "";

  useEffect(() => {
    if (portalmenu !== "") {
      Portal.getShortcut(portalmenu).then(rs => {
        if (rs && rs.options) {
          rs.options.bgColor && setBgColor(rs.options.bgColor);
          rs.options.titleColor && setColor(rs.options.titleColor);
          rs.options.bgTitle && setPortalBgTitle(rs.options.bgTitle);
          rs.options.bg && setPortalLogo(rs.options.bg);
          rs.options.isHiddenTitle && setIsHiddenTitle(rs.options.isHiddenTitle);
        }
        rs && rs.items && setItems(rs.items);
        setIsLoading(false);
      }).catch();
    }
  }, [portalmenu]);
 
  if (showPortal && portalmenu !== "" && isLoading) return title && (<div style={{height:"50px",width:"100%",background: bgColor || "#00000000"}} />)

  if (showPortal && portalStyle) {
    return title && (
      <DashboardPagePortal 
        portalStyle={portalStyle} 
        items={items} 
        portalLogo={portalLogo}
        portalBgTitle={portalBgTitle} 
        color={color}
        bgColor={bgColor}
        isHiddenTitle={isHiddenTitle}
        dashboradTitle={!isHiddenTitle && title} 
        clickhandle={clickhandle} 
        handleMenuClick={handleMenuClick}
      />
    );
  } else if (showPortal) {
    return title && ( 
      <div style={{height:"50px",width:"100%",background: bgColor || "#00000000"}}>
        <div style={{margin:"0 auto",height:"50px",textAlign:"center", background: portalLogo}}>
          {portalBgTitle && (<label style={{margin:"10px",fontSize:"20px",color}}>{portalBgTitle}</label>)}
          {(items.length > 0) && items.map(item=>(<MenuShortcut item={item} menuClick={handleMenuClick} color={color} />))} 
          {!isHiddenTitle && (<label style={{margin:"10px",fontSize:"20px",color}}>
            {clickhandle ? (
              <React.Fragment>
              <a onClick={() => window.opener ? window.close(): Auth.logout()} >
                <img src={logoUrl} alt="首页" title="首页" />
              </a>&nbsp;
              <label onClick={clickhandle}>
                {title}
                <DownOutlined style={{fontSize:"15px"}} />
              </label>
              </React.Fragment>
            ) : (
              <label>{title}</label>
            )}
          </label>
          )}
        </div>
      </div>
    );
  } else {
  return (
    <div className="title-with-tags">
        <div className="page-title" >
        <FavoritesControl item={dashboard} />
        <h3>
          <EditInPlace
            isEditable={editingLayout}
            onDone={name => updateDashboard({ name })}
            value={dashboard.name}
            ignoreBlanks
          />
        </h3>
        <Tooltip title={dashboard.user.name} placement="bottom">
            <img src={dashboard.user.profile_image_url} className="profile-image" alt={dashboard.user.name} />
        </Tooltip>
      </div>
      <DashboardTagsControl
        tags={dashboard.tags}
        isDraft={dashboard.is_draft}
        isArchived={dashboard.is_archived}
        canEdit={canEditDashboard}
        getAvailableTags={getDashboardTags}
        onEdit={tags => updateDashboard({ tags })}
      />
    </div>
  );
}
}

DashboardPageTitle.propTypes = {
  dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  title: PropTypes.string,
  clickhandle: PropTypes.func,
};

export function RefreshButton({ dashboardOptions }) {
  const { refreshRate, setRefreshRate, disableRefreshRate, refreshing, dashboard, canEditDashboard, refreshDashboard } = dashboardOptions;
  const allowedIntervals = policy.getDashboardRefreshIntervals();
  const refreshRateOptions = clientConfig.dashboardRefreshIntervals;

  const onRefreshRateSelected = ({ key }) => {
    const parsedRefreshRate = parseFloat(key);
    if (parsedRefreshRate) {
      setRefreshRate(parsedRefreshRate);
      refreshDashboard();
    } else {
      disableRefreshRate();
    }
  };

  const uploadProps = {
    name: 'file',
    showUploadList: false,
    accept: ".xls,.xlsx",
    action: 'api/dashboards/upload/' + dashboard.id,
    maxCount:1,
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        window.console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功！`);
        setTimeout(()=>{
          dashboardOptions.refreshDashboard(true);          
        }, 2000);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败！可能没有当前数据源权限，请联系系统管理员`);
      }
    },
  };  

  const menu = (
    <>
    <Menu.Divider />
    <Menu.Item key="download_excel">
      <Link href={'api/dashboards/download/' + dashboard.id} download={dashboard.id + ".xls"} target="_self">
        下载数据源Excel文件
      </Link>
    </Menu.Item>
    <Menu.Item key="upload_excel">
      <Upload {...uploadProps}>
        <Button size='small'>上传Excel更新数据源</Button>
      </Upload>
    </Menu.Item>
    </>
  );

  return (
    <Button.Group>
      <Tooltip title={refreshRate ? `自动刷新频率 ${durationHumanize(refreshRate)}` : null}>
        <Button type={buttonType(refreshRate)} onClick={() => refreshDashboard()}>
          <i className={cx("zmdi zmdi-refresh m-r-5", { "zmdi-hc-spin": refreshing })} />
          {refreshRate ? durationHumanize(refreshRate) : "刷新"}
        </Button>
      </Tooltip>
      <Dropdown
        trigger={["click"]}
        placement="bottomRight"
        overlay={
          <Menu onClick={onRefreshRateSelected} selectedKeys={[`${refreshRate}`]}>
            {refreshRateOptions.map(option => (
              <Menu.Item key={`${option}`} disabled={!includes(allowedIntervals, option)}>
                {durationHumanize(option)}
              </Menu.Item>
            ))}
            {refreshRate && <Menu.Item key={null}>停止自动刷新</Menu.Item>}
            {canEditDashboard && dashboard.template_type===2 && menu}
          </Menu>
        }>
        <Button className="icon-button hidden-xs" type={buttonType(refreshRate)}>
          <i className="fa fa-angle-down" />
          <span className="sr-only">Split button!</span>
        </Button>
      </Dropdown>
    </Button.Group>
  );
}

RefreshButton.propTypes = {
  dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};

function DashboardMoreOptionsButton({ dashboardOptions }) {
  const {
    dashboard,
    setEditingLayout,
    togglePublished,
    archiveDashboard,
    removeDashboard,
    managePermissions,
    gridDisabled,
    isDashboardOwnerOrAdmin,
  } = dashboardOptions;

  const archive = () => {
    Modal.confirm({
      title: "报表存档",
      content: `确定要将 "${dashboard.name}" 报表存档？`,
      okText: "确定",
      cancelText: "取消",
      okType: "danger",
      onOk: archiveDashboard,
      maskClosable: true,
      autoFocusButton: null,
    });
  };

  const remove = () => {
    Modal.confirm({
      title: "删除报表",
      content: `确定要将 "${dashboard.name}" 报表删除吗？此操作不可逆！`,
      okText: "确定",
      cancelText: "取消",
      okType: "danger",
      onOk: () => {
        removeDashboard();
        window.location.href = "dashboards";
      },
      maskClosable: true,
      autoFocusButton: null,
    });
  };

  const showCreateDashboardDialog = useCallback(() => {
    CreateDashboardDialog.showModal({ id: dashboard.id });
  }, [dashboard]);

  const showEditDashboardDialog = useCallback(() => {
    EditDashboardDialog.showModal({ dashboard });
  }, [dashboard]);

  return (
    <Dropdown
      trigger={["click"]}
      placement="bottomRight"
      overlay={
        <Menu data-test="DashboardMoreButtonMenu">
          <Menu.Item>
            <a onClick={showCreateDashboardDialog}>复制<i className="fa fa-external-link m-l-5" /></a>
          </Menu.Item>
          <Menu.Item>
            <a href={"api/dashboards/export/" + dashboard.id} download="a.json">导出<i className="fa fa-sign-out m-l-5" /></a>
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item className={cx({ hidden: gridDisabled })}>
            <a onClick={() => setEditingLayout(true)}>编辑</a>
          </Menu.Item>
          {clientConfig.showPermissionsControl && isDashboardOwnerOrAdmin && (
            <Menu.Item>
              <a onClick={managePermissions}>权限管理</a>
            </Menu.Item>
          )}
          {!clientConfig.disablePublish && !dashboard.is_draft && (
            <Menu.Item>
              <a onClick={togglePublished}>草稿</a>
            </Menu.Item>
          )}
          <Menu.Item>
            <a onClick={archive}>存档</a>
          </Menu.Item>
          <Menu.Item>
            <a onClick={remove}>删除<i className="fa fa-eraser m-l-5" /></a>
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item>
            <a onClick={showEditDashboardDialog}>属性</a>
          </Menu.Item>
        </Menu>
      }>
      <Button className="icon-button m-l-5" data-test="DashboardMoreButton">
        <EllipsisOutlinedIcon rotate={90} />
      </Button>
    </Dropdown>
  );
}

DashboardMoreOptionsButton.propTypes = {
  dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};

function DashboardControl({ dashboardOptions, headerExtra }) {
  const {
    dashboard,
    togglePublished,
    canEditDashboard,
    fullscreen,
    toggleFullscreen,
    showShareDashboardDialog,
    setEditingLayout,
  } = dashboardOptions;
  const showPublishButton = dashboard.is_draft;
  const showRefreshButton = true;
  const showFullscreenButton = !dashboard.is_draft;
  const canShareDashboard = canEditDashboard && !dashboard.is_draft;
  const showShareButton = !clientConfig.disablePublicUrls && canShareDashboard;
  const showMoreOptionsButton = canEditDashboard;
  const showPortal = window.location.search.includes("show_portal");

  const uploadProps = {
    name: 'file',
    showUploadList: false,
    accept: ".xls,.xlsx",
    action: 'api/dashboards/upload/' + dashboard.id,
    maxCount:1,
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        window.console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功！`);
        setTimeout(()=>{
          dashboardOptions.refreshDashboard(true);          
        }, 2000);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败！可能没有当前数据源权限，请联系系统管理员`);
      }
    },
  };

  const menu = (
    <Menu>
    <Menu.Item key="download_excel">
      <Link href={'api/dashboards/download/' + dashboard.id} download={dashboard.id + ".xls"} target="_self">
        下载数据源文件
      </Link>
    </Menu.Item>
    <Menu.Item key="upload_excel">
      <Upload {...uploadProps}>
        <Button size='small'>上传文件更新数据源</Button>
      </Upload>
    </Menu.Item>
    </Menu>
  )

  return (
    <div className="dashboard-control" 
      style={showPortal ? {position: "absolute", right: 0, top: 10, background: 'url(' + policy.getHost() + '/static/images/portal/refresh.png) no-repeat left'} : null}
    >
      {!dashboard.is_archived && (
        <span className="hidden-print">
          {!showPortal && showPublishButton && (
            <Button className="m-r-5 hidden-xs" onClick={togglePublished}>
              <span className="fa fa-paper-plane m-r-5" /> 发布
            </Button>
          )}
          {!showPortal && showPublishButton && canEditDashboard && dashboard.template_type!==2 && (
            <Button className="m-r-5 hidden-xs" onClick={() => setEditingLayout(true)}>
              <span className="fa fa-edit m-r-5" /> 编辑报表
            </Button>
          )}
          {!showPortal && canEditDashboard && dashboard.template_type===2 && (
            <Dropdown.Button className="m-r-5 hidden-xs"
              icon={<DownOutlined />}
              overlay={menu}
            >
              数据源Excel文件
            </Dropdown.Button>
          )}
          {showRefreshButton && <RefreshButton dashboardOptions={dashboardOptions} />}
          {!showPortal && showFullscreenButton && (
            <Tooltip className="hidden-xs" title="进入/退出 全屏显示">
              <Button type={buttonType(fullscreen)} className="icon-button m-l-5" onClick={toggleFullscreen}>
                <i className="zmdi zmdi-fullscreen" />
              </Button>
            </Tooltip>
          )}
          {headerExtra}
          {!showPortal && showShareButton && (
            <Tooltip title="报表共享设置">
              <Button
                className="icon-button m-l-5"
                type={buttonType(dashboard.publicAccessEnabled)}
                onClick={showShareDashboardDialog}
                data-test="OpenShareForm">
                <i className="zmdi zmdi-share" />
              </Button>
            </Tooltip>
          )}
          {!showPortal && showMoreOptionsButton && <DashboardMoreOptionsButton dashboardOptions={dashboardOptions} />}
        </span>
      )}
    </div>
  );
}

DashboardControl.propTypes = {
  dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  headerExtra: PropTypes.node,
};

function DashboardEditControl({ dashboardOptions, headerExtra }) {
  const { setEditingLayout, doneBtnClickedWhileSaving, dashboardStatus, retrySaveDashboardLayout } = dashboardOptions;
  let status;
  if (dashboardStatus === DashboardStatusEnum.SAVED) {
    status = <span className="save-status">已保存</span>;
  } else if (dashboardStatus === DashboardStatusEnum.SAVING) {
    status = (
      <span className="save-status" data-saving>
        正在保存
      </span>
    );
  } else {
    status = (
      <span className="save-status" data-error>
        保存失败
      </span>
    );
  }
  return (
    <div className="dashboard-control">
      {status}
      {dashboardStatus === DashboardStatusEnum.SAVING_FAILED ? (
        <Button type="primary" onClick={retrySaveDashboardLayout}>
          重试
        </Button>
      ) : (
        <Button loading={doneBtnClickedWhileSaving} type="primary" onClick={() => setEditingLayout(false)}>
          {!doneBtnClickedWhileSaving && <i className="fa fa-check m-r-5" />} 保存
        </Button>
      )}
      {headerExtra}
    </div>
  );
}

DashboardEditControl.propTypes = {
  dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  headerExtra: PropTypes.node,
};

export default function DashboardHeader({ dashboardOptions, headerExtra, title, clickhandle, handleMenuClick }) {
  const { dashboard, editingLayout } = dashboardOptions;
  const DashboardControlComponent = editingLayout ? DashboardEditControl : DashboardControl;
  const showPortal = window.location.search.includes("show_portal");
  const hideRefreshButton = dashboard.layout.isHideRefresh || false;

  return (
    <div className="dashboard-header" 
      style={{background: "#00000000"}}
    >
      <DashboardPageTitle title={title} 
        dashboardOptions={dashboardOptions} clickhandle={clickhandle} handleMenuClick={handleMenuClick}
      />
      {(!showPortal || !hideRefreshButton) && <DashboardControlComponent dashboardOptions={dashboardOptions} headerExtra={headerExtra} />}
    </div>
  );
}

DashboardHeader.propTypes = {
  dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  headerExtra: PropTypes.node,
  title: PropTypes.string,
  clickhandle: PropTypes.func,
  handleMenuClick: PropTypes.func,
};
